<template>
  <el-breadcrumb class="app-breadcrumb" separator="/">
    <transition-group name="breadcrumb">
      <el-breadcrumb-item v-for="(item, index) in levelList" :key="item.name">
        <span v-if="!item.url" class="no-redirect">{{ item.name }}</span>
        <router-link v-else :to="item.url">{{ item.name }}</router-link>
      </el-breadcrumb-item>
    </transition-group>
  </el-breadcrumb>
</template>

<script>
import { generateTitle } from '@/utils/i18n'
import { mapState } from 'vuex'
export default {
  created() {
    this.getBreadcrumb()
  },
  data() {
    return {
      levelList: null
    }
  },
  computed: {
    ...mapState({
      modules: state => state.permission.modules,
      pages: state => state.permission.pages,
      opened: state => state.app.sidebar.opened
    })
  },
  watch: {
    $route() {
      this.getBreadcrumb()
    }
  },
  methods: {
    generateTitle,
    getBreadcrumb() {
      const page = this.pages[this.$router.currentRoute.path]
      const moduleCode = page ? page.mdlCode : undefined
      const matched = []
      if (moduleCode && moduleCode !== '000') {
        getModule(this.modules, moduleCode, matched, 1)
      }
      // this.levelList = [{ name: '首页', url: '/workbench' }].concat(matched)
      this.levelList = matched
    }
  }
}

function getModule(modules, moduleCode, matched, i) {
  let found = false
  modules.forEach(module => {
    if (!found && module.moduleCode === moduleCode.substr(0, i * 3)) {
      found = true
      matched[i - 1] = {
        name: module.moduleName,
        url: module.moduleUrl
      }
      getModule(module.children, moduleCode, matched, i + 1)
      return false
    }
    return true
  })
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.app-breadcrumb.el-breadcrumb {
  display: inline-block;
  font-size: 14px;
  line-height: 50px;
  margin-left: 10px;
  .no-redirect {
    color: #7ad2ff;
    cursor: text;
  }
}
</style>
